Skip to content

Fix floating buttons covering content on mobile/tablet#23373

Open
mohini-crl wants to merge 2 commits into
mainfrom
fix/mobile-responsive-floating-buttons
Open

Fix floating buttons covering content on mobile/tablet#23373
mohini-crl wants to merge 2 commits into
mainfrom
fix/mobile-responsive-floating-buttons

Conversation

@mohini-crl
Copy link
Copy Markdown
Contributor

Summary

  • "Rate This Page" button: Hidden on mobile/tablet (< 992px) and moved into the Docs Menu sidebar. Clicking it closes the sidebar and opens the feedback overlay full-width from the bottom of the screen.
  • "Ask AI" (Kapa) button: Shrunk to a 36x36px icon-only button on mobile/tablet so it no longer overlaps page content. Modal z-index bumped to 9999 for proper layering.
  • Both features remain fully accessible on all screen sizes — just repositioned/resized to avoid covering content.

Related issue

EDUENG-104

Files changed

File Change
src/current/_includes/feedback-widget.html Added media query to hide floating button on mobile; feedback overlay renders full-width
src/current/_includes/head.html Shrink Kapa button to icon-only on mobile; bump modal z-index
src/current/_layouts/default.html Added "Rate This Page" button in sidebar for mobile; JS to close sidebar and open feedback overlay

Test plan

  • Open docs site on mobile viewport (< 480px) — verify "Rate This Page" floating button is hidden and "Ask AI" is a small icon
  • Open docs site on tablet viewport (< 992px) — same behavior
  • Open Docs Menu on mobile — verify "Rate This Page" button appears at bottom of sidebar
  • Click "Rate This Page" in sidebar — verify sidebar closes and feedback overlay opens full-width
  • Click small "Ask AI" icon on mobile — verify Kapa modal opens properly
  • Verify desktop (≥ 992px) is unchanged — both floating buttons appear as before

🤖 Generated with Claude Code

The "Rate This Page" and "Ask AI" floating buttons were overlapping and
hiding page content on mobile and tablet viewports. This fix:

- Hides the floating "Rate This Page" button on viewports < 992px and
  moves it into the Docs Menu sidebar as a full-width button that closes
  the sidebar and opens the feedback overlay full-width from the bottom
- Shrinks the Kapa "Ask AI" floating button to a 36x36px icon-only
  button on mobile/tablet so it no longer covers content
- Bumps Kapa modal z-index to 9999 to ensure it renders above all
  page elements on mobile

Resolves: EDUENG-104

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026

Deploy Preview for cockroachdb-api-docs canceled.

Name Link
🔨 Latest commit a958aa4
🔍 Latest deploy log https://app.netlify.com/projects/cockroachdb-api-docs/deploys/6a0d8a08ea8c3b00084c6ca1

@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026

Deploy Preview for cockroachdb-interactivetutorials-docs canceled.

Name Link
🔨 Latest commit a958aa4
🔍 Latest deploy log https://app.netlify.com/projects/cockroachdb-interactivetutorials-docs/deploys/6a0d8a084b63c000087d2e32

@github-actions
Copy link
Copy Markdown

Files changed:

  • src/current/_includes/feedback-widget.html
  • src/current/_includes/head.html
  • src/current/_layouts/default.html

@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026

Netlify Preview

Name Link
🔨 Latest commit 5fb1d6c
🔍 Latest deploy log https://app.netlify.com/projects/cockroachdb-docs/deploys/6a0d89d81dbca10008abf98c
😎 Deploy Preview https://deploy-preview-23373--cockroachdb-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 20, 2026

Netlify Preview

Name Link
🔨 Latest commit a958aa4
🔍 Latest deploy log https://app.netlify.com/projects/cockroachdb-docs/deploys/6a0d8a083022030008ba3338
😎 Deploy Preview https://deploy-preview-23373--cockroachdb-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant